<!DOCTYPE html>
<html>
<head>
    <title>阅读器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
		body {
			font-size: 16px;
			line-height: 1.5;
			background-color: #fff;
			color: #333;
			margin: 0;
			padding: 0;
		}
		.container {
			padding: 8px;
            height: auto;
            min-height: 1800px;
		}
		.button-container {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease-in-out;
			transform: translateY(100%);
		}
		.button-container.show {
			transform: translateY(0);
		}
		button {
			font-size: 16px;
			padding: 8px;
			border: none;
			background-color: transparent;
			cursor: pointer;

			transition: background-color 0.3s ease-in-out;
		}
		button:hover {
			background-color: #f5f5f5;
		}
	</style>
</head>
<body >
<div class="container">
    <div id="content"></div>
</div>
<div class="button-container show" id="button-container">
    <button id="font-size-decrease">A-</button>
    <button id="font-size-increase">A+</button>
    <button id="background-color-white">白色</button>
    <button id="background-color-lightgray">浅灰</button>
    <button id="background-color-darkgray">深灰</button>
</div>
<script>
		var buttonContainer = document.getElementById("button-container");
		var fontSizeDecrease = document.getElementById("font-size-decrease");
		var fontSizeIncrease = document.getElementById("font-size-increase");
		var backgroundColorWhite = document.getElementById("background-color-white");
		var backgroundColorLightgray = document.getElementById("background-color-lightgray");
		var backgroundColorDarkgray = document.getElementById("background-color-darkgray");
		var body = document.body;
		var fontSize = parseInt(window.getComputedStyle(body).getPropertyValue("font-size"));
		var backgroundColor = window.getComputedStyle(body).getPropertyValue("background-color");

		// 显示/隐藏按钮
		var lastScrollPosition = 0;
		window.addEventListener("scroll", function() {
			var currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
			if (currentScrollPosition > lastScrollPosition) {
				buttonContainer.classList.remove("show");
			} else {
				buttonContainer.classList.add("show");
			}
			lastScrollPosition = currentScrollPosition;
		});

		// 调整字体大小
		fontSizeDecrease.addEventListener("click", function() {
			fontSize--;
			body.style.fontSize = fontSize + "px";
		});
		fontSizeIncrease.addEventListener("click", function() {
			fontSize++;
			body.style.fontSize = fontSize + "px";
		});

		// 调整背景颜色
		backgroundColorWhite.addEventListener("click", function() {
			body.style.backgroundColor = "#fff";
			body.style.color = "#333";
		});
		backgroundColorLightgray.addEventListener("click", function() {
			body.style.backgroundColor = "#f5f5f5";
			body.style.color = "#333";
		});
		backgroundColorDarkgray.addEventListener("click", function() {
			body.style.backgroundColor = "#333";
			body.style.color = "#fff";
		});

		function upContent(){
            document.getElementById("content").innerHTML = window.reader.getContent();
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

	</script>
</body>
</html>